<template>
  <div class="app-container home">
    <el-row :gutter="20" class="welcome-section">
      <el-col :span="24">
        <h1 class="welcome-title">AI智能对话小程序后台</h1>
        <p class="welcome-subtitle">智能对话，优雅体验</p>
        <div class="user-welcome">
          <i class="el-icon-user"></i>
          <span>欢迎您，{{ username }}</span>
        </div>
        <div class="time-display">
          <div class="time-item">
            <span class="time-value">{{ currentDate }}</span>
          </div>
          <div class="time-item">
            <span class="time-value">{{ currentTime }}</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="feature-section">
      <el-col :span="8">
        <el-card class="feature-card">
          <i class="el-icon-chat-dot-round"></i>
          <h3>智能对话</h3>
          <p>基于先进AI模型的智能对话系统</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="feature-card">
          <i class="el-icon-mobile"></i>
          <h3>小程序管理</h3>
          <p>便捷的小程序运营与数据管理</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="feature-card">
          <i class="el-icon-data-analysis"></i>
          <h3>数据分析</h3>
          <p>全面的对话数据统计与分析</p>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="quick-start-section">
      <el-col :span="24">
        <h2 class="section-title">快速开始</h2>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="quick-card" @click.native="$router.push('/chatManage/dialogue')">
              <i class="el-icon-chat-line-round"></i>
              <span>对话管理</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="quick-card" @click.native="$router.push('/userManage/wxuser')">
              <i class="el-icon-user"></i>
              <span>用户管理</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="quick-card" @click.native="$router.push('/modelManage/modelConfig')">
              <i class="el-icon-pie-chart"></i>
              <span>模型配置</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="quick-card" @click.native="$router.push('/system/dict')">
              <i class="el-icon-setting"></i>
              <span>字典配置</span>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="project-info-section">
      <el-col :span="24">
        <el-card class="project-card">
          <h2 class="section-title">项目信息</h2>
          <div class="project-links">
<!--            <a href="https://github.com/your-username/ai-chat" target="_blank" class="project-link">-->
<!--              <i class="el-icon-link"></i>-->
<!--              <span>GitHub 项目地址</span>-->
<!--            </a>-->
            <a href="https://justyh.cn/home/" target="_blank" class="project-link">
              <i class="el-icon-user"></i>
              <span>作者主页</span>
            </a>
            <a href="https://gitee.com/yuanhan93/ai-chat-open.git" target="_blank" class="project-link">
              <i class="el-icon-link"></i>
              <span>Gitee 项目地址</span>
            </a>
          </div>
          <div class="project-desc">
            <p>这是一个基于 Vue + Element UI 开发的 AI 智能对话小程序后台管理系统</p>
            <p>如果您觉得这个项目不错，欢迎给个 Star 支持一下</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss">
.home {
  min-height: calc(100vh - 85px);
  padding: 40px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}

.welcome-section {
  text-align: center;
  margin-bottom: 60px;

  .welcome-title {
    font-size: 36px;
    color: #303133;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .welcome-subtitle {
    font-size: 18px;
    color: #606266;
    margin-bottom: 20px;
  }

  .user-welcome {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: rgba(64, 158, 255, 0.1);
    border-radius: 20px;
    margin-bottom: 30px;

    i {
      font-size: 20px;
      color: #409EFF;
      margin-right: 10px;
    }

    span {
      font-size: 16px;
      color: #409EFF;
    }
  }

  .time-display {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;

    .time-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
      padding: 15px 30px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(64, 158, 255, 0.3);
      }

      .time-label {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 8px;
      }

      .time-value {
        font-size: 24px;
        color: #ffffff;
        font-weight: 600;
      }
    }
  }
}

.feature-section {
  margin-bottom: 60px;

  .feature-card {
    text-align: center;
    padding: 30px 20px;
    transition: all 0.3s;
    height: 100%;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

    i {
      font-size: 48px;
      color: #409EFF;
      margin-bottom: 20px;
    }

    h3 {
      font-size: 20px;
      color: #303133;
      margin-bottom: 15px;
    }

    p {
      color: #606266;
      font-size: 14px;
    }
  }
}

.quick-start-section {
  margin-bottom: 60px;

  .section-title {
    font-size: 24px;
    color: #303133;
    margin-bottom: 30px;
    text-align: center;
  }

  .quick-card {
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      background-color: #409EFF;
      color: white;

      i, span {
        color: white;
      }
    }

    i {
      font-size: 32px;
      color: #409EFF;
      margin-bottom: 10px;
      display: block;
    }

    span {
      font-size: 16px;
      color: #303133;
    }
  }
}

.project-info-section {
  .project-card {
    padding: 30px;

    .section-title {
      font-size: 24px;
      color: #303133;
      margin-bottom: 30px;
      text-align: center;
    }

    .project-links {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 30px;

      .project-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #409EFF;
        transition: all 0.3s;

        &:hover {
          color: #66b1ff;
          transform: translateY(-2px);
        }

        i {
          font-size: 20px;
          margin-right: 8px;
        }

        span {
          font-size: 16px;
        }
      }
    }

    .project-desc {
      text-align: center;
      color: #606266;

      p {
        margin: 10px 0;
        font-size: 14px;
      }
    }
  }
}
</style>

<script>
export default {
  name: 'Home',
  data() {
    return {
      username: '管理员', // 这里可以从用户信息中获取
      currentTime: '',
      currentDate: '',
      timer: null
    }
  },
  methods: {
    updateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')

      this.currentDate = `${year}-${month}-${day}`
      this.currentTime = `${hours}:${minutes}:${seconds}`
    }
  },
  mounted() {
    this.updateTime()
    this.timer = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>
